<template>
	<view class="container">
		<view class="p-30 bg-white">
			<uni-forms class="" ref="formData" :modelValue="formData" label-width="100px">
				<view class="m-b20">
					<uni-forms-item label="您的问题" required name="content">
						<uni-easyinput type="textarea" v-model="formData.content" placeholder="请输入" maxlength="200" @input="contentInput" />
						<view class="textareaLen">{{contentLen}}/200</view>
					</uni-forms-item>
				</view>
				<view class="m-b20">
					<uni-forms-item label="问题图片" name="images">
						<view class="imgs uni-flex justify-left flex-auto-row" v-if="images.length>0">
							<view class="imgs_item m-r10 bg-grayf5 m-t10" v-for="(item,ikey) in images">
								<image :src="item" mode="aspectFill" @click="viewImage(images, ikey)"></image>
								<uni-icons class="imgs_remove" type="closeempty" size="10" color="#ffffff" @click="imageRemove(ikey)"></uni-icons>
							</view>
						</view>
						<view class="imgs_item bg-grayf5 uni-flex justify-center align-center flex-column text-center m-t20 m-b20" @click="upload">
							<view><uni-icons type="plusempty" size="25"color="#999999"></uni-icons></view>
						</view>
					</uni-forms-item>
				</view>
				<view class="m-b20">
					<uni-forms-item label="联系电话" name="phone">
						<uni-easyinput v-model="formData.phone" placeholder="请输入联系电话" />
					</uni-forms-item>
				</view>
			</uni-forms>
		</view>
		<button class="formBtn bg-blue round-40 text-white" @click="submitForm">提交</button>
	</view>
</template>

<script>
import { salesCreate } from "@/api/aftersales.js"
import urlConfig from '@/common/config.js'
import { uploadImage } from '@/common/js/upload.js'
export default {
	data() {
		return {
			CustomerNo: "",
			formData: {
				content: "",
				images: [],
				phone: "",
			},
			images: [],
			contentLen: 0,
		}
	},
	onLoad(e) {
		this.CustomerNo = e.CustomerNo ? e.CustomerNo : ""
	},
	methods: {
		// 提交
		submitForm(){
			let params = this.formData;
			if(params.content == "") {				
				uni.showToast({ title: "请输入问题和意见", icon: 'none' })
				return
			}
			params.CustomerNo = this.CustomerNo
			salesCreate(params).then((res) => {
				if(res.code == '0') {
					uni.showToast({ title: "提交成功，我们会尽快与您联系！", icon: 'none' })		
					setTimeout(function(){						
						uni.navigateBack({
							delta: 1,
							success: () => {
								var pages = getCurrentPages();
								var prePage = pages[pages.length - 1] //上一个页面
								prePage.$vm.getList({CustomerNo: params.CustomerNo})
							}
						})
					},1500)	
				}else {
					uni.showToast({ title: res.msg, icon: 'none' })					
				}
			})
		},
		/**
		 * 问题和建议字符
		 */
		contentInput(e){
			let leng = this.formData.content.length;
			if(200 < leng) {
				this.$set(this.formData, 'content', this.formData.content.substr(0,200));
				leng = 200;
			}
			this.contentLen = 200 - leng;
		},
		/**
		 * 上传图片
		 */
		upload(){
			let that = this
			uploadImage(9).then(res => {
				if(res) {					
					that.images = that.images.concat(res)
					that.$set(that.formData, "images", that.images);
				}
			})
		},
		/**
		 * 删除图片
		 */
		imageRemove(index){
			this.images.splice(index, 1);
			this.$set(this.formData, "images", this.images);
		},
		/**
		 * 查看大图
		 */
		viewImage(imgs,index){
			uni.previewImage({
				current: index,
				urls: imgs
			})
		},
	}
}
</script>

<style>
.textareaLen {
	color: #999;
	text-align: right;
	font-size: 10px;
}
.img_item {
	width: 150rpx;
	height: 150rpx;
}
.formBtn {
	bottom: 100rpx;
	position: absolute;
	width: 86%;
	margin-left: 7%;
}
</style>
